<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:700px;height:400px;"></div>
    <script>
        var idEchs = document.getElementById("main");
        var ech = echarts.init(idEchs);
        var option = {
            backgroundColor: '#0E205d',
            title:{
              text:'办公室杂项',
              left:'50%',
              textAlign:'center',
              textStyle:{
                color:'white'
              },
            },
            xAxis:{
                type:'category',
                data:['工作票','操作票','抢修','用电调查','设备巡视','现场勘察','到岗到位'],
                axisLine:{
                  show:true,
                  symbol:['none','arrow'],
                  symbolOffset:[0,10]
                },
                axisLabel:{
                  margin:15,
                  color:'white' ,
                  fontSize:13
                },
              },
            yAxis:{
              type:'value',
              axisLine:{
                show:true,
                symbol:['none','arrow'],
                symbolOffset:[0,10]
              },
              axisLabel:{
                 color:'white' 
              },
              //分隔线设置
              splitLine:{
                  lineStyle:{
                    color:'#20376d'
                  }
              }
            },
            color:[{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#00f1fd' // 0% 处的颜色
              }, {
                  offset: 1, color: '#1f45a4' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }],
            series:[{
              type:'bar',
              data:[300,450,770,203,255,188,156],
              barWidth:30,
              itemStyle:{
                borderRadius:20,
                shadowColor: '#1f45a4',
                shadowBlur: 10
              },
              label:{
                show:true,
                position: 'top',
                backgroundColor:'#102d6a',
                width:30,
                height:30,
                lineHeight:30,
                verticalAlign:'middle',
                borderRadius:30,
                distance: 15
              }
            }]
        };
        ech.setOption(option);
    </script>
</body>
</html>